<template>
	<div class="">
		<el-form ref="searchForm" :inline="true" :model="searchForm">
			<el-form-item label="商品名称">
				<el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable />
			</el-form-item>
			<el-form-item label="商品品牌">
				<el-select v-model="searchForm.brand" filterable p laceholder="请选择商品品牌" clearable style="width: 170px;">
					<el-option v-for="item in options1" :key="item.brand" :label="item.brand" :value="item.brand">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品类目">
				<el-select v-model="searchForm.category" filterable placeholder="请选择商品类目" clearable style="width: 170px;">
					<el-option v-for="item in options2" :key="item.category" :label="item.category" :value="item.category">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="成新度">
				<el-select v-model="searchForm.is_new" filterable placeholder="请选择成新度" clearable style="width: 170px;">
					<el-option v-for="item in options3" :key="item.is_new" :label="item.is_new" :value="item.is_new">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="search()">查询</el-button>
				<el-button size="small" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-divider />
		<div style="padding:0 30px">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center">
					<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
				</h5>
				<el-button type="warning" @click="openSelect" size="small">录入商品</el-button>
				<el-button type="success" @click="handeleExport" size="small">导出</el-button>
			</div>
			<el-table v-show="tableData.length > -1" :data="tableData" border>
				<el-table-column align="center" prop="id" label="商品ID" />
				<el-table-column align="center" prop="goods_no" label="商品编号" />
				<el-table-column align="center" prop="create_time" label="报价时间" width="120" />
				<el-table-column align="center" prop="category" label="类目" />
				<el-table-column align="center" prop="brand" label="品牌" />
				<el-table-column align="center" prop="goods_name" label="商品名称" />
				<el-table-column align="center" prop="is_new" label="成新度">
					<template slot-scope="scope">
						{{ scope.row.is_new == 100 ? '全新' : scope.row.is_new == 98 ? '98新' : scope.row.is_new == 95 ? '95新' : '90新' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="color" label="颜色" />
				<el-table-column align="center" prop="run_memory" label="运行内存" />
				<el-table-column align="center" prop="memory" label="内存" />
				<el-table-column align="center" prop="website_price" label="官网价" />
				<el-table-column align="center" prop="is_invoice" label="是否含票">
					<template slot-scope="scope">
						{{ scope.row.is_invoice == 1 ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="is_remote" label="是否远程">
					<template slot-scope="scope">
						{{ scope.row.is_remote == 1 ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="price" label="报价金额" width="150">
					<template slot-scope="scope">
						<div v-if="!scope.row.isEdit">{{ scope.row.price }}</div>
						<div v-else>
							<el-input v-model="scope.row.price"></el-input>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="price1" label="报价金额1" width="150">
					<template slot-scope="scope">
						<div v-if="!scope.row.isEdit">{{ scope.row.price1 }}</div>
						<div v-else>
							<el-input v-model="scope.row.price1"></el-input>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作" width="200px">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" size="small">{{ scope.row.isEdit ? '保存' : '编辑'
						}}</el-button>
						<el-button @click="handleDel(scope.row.id)" size="small" type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" @getList="getList" />
		</div>
		<goods-dialog ref="goodsDialog" @getList="getList"></goods-dialog>
	</div>
</template>
<script>
import myDatePicker from '@/components/myDatePicker'
import customPage from '@/components/customPage'
import goodsDialog from './components/goodsDialog'
import { procureList, editProcure, delProcure, procureData, procureListExport } from '@/api/audit'
export default {
	components: { customPage, myDatePicker, goodsDialog },
	data() {
		return {
			searchForm: {
				goods_name: '',
				is_new: '',
				category: '',
				brand: ''
			},
			tableData: [],
			options1: [],
			options2: [],
			options3: []
		}
	},
	mounted() {
		this.getList()
		procureData().then(res => {
			this.options1 = res.brand
			this.options2 = res.category
			this.options3 = res.is_new
		})
	},
	methods: {
		//删除商品 
		handleDel(id) {
			this.$confirm('您确定要删除吗?', '删除', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				delProcure(id).then(res => {
					this.getList()
				})
			}).catch(() => { })
		},
		// 编辑报价
		handleClick(row) {
			if (row.isEdit) {
				this.$delete(row, 'isEdit')
				// 编辑报价接口
				let params = {
					procure_id: row.id,
					price: row.price,
					price1: row.price1
				}
				editProcure(params).then(res => {
					this.getList()
				})
			} else {
				this.$set(row, 'isEdit', true)
			}
		},
		handeleExport() {
			procureListExport({ ...this.searchForm }).then(res => {
				console.log(res);
			})
		},
		openSelect() {
			this.$refs.goodsDialog.dialogVisible = true
		},
		search() {
			this.$refs.customPage.page = 1
			this.getList()
		},
		reset() {
			this.searchForm = {
				goods_name: '',
				is_new: '',
				category: '',
				brand: ''
			}
			this.getList()
		},
		// 获取数据
		getList(flag) {
			// flag为true, 则不刷新表格
			const { page, pageSize } = this.$refs.customPage
			if (!flag) {
				this.tableData = []
			}
			procureList({
				page,
				pageSize,
				...this.searchForm,
			}).then((res) => {
				const { list } = res.data
				this.tableData = res.data || []
				this.total = res.total || 0
			})
		},
	},
}
</script>
<style></style>
  